<template>
  <div class="sub-menu-wrapper">
    <div class="title" @click="menuItemClick">
      <div class="title-left">
        <i :class="iconCls"></i>
        <span>{{ title }}</span>
      </div>
      <div class="title-right">
        <i :class="arrowCls"></i>
      </div>
    </div>
    <ul v-show="isShow">
      <slot></slot>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SubMenu',
  props: {
    icon: {
      type: String,
      default: () => ''
    },
    title: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    menuItemClick() {
      this.isShow = !this.isShow
    }
  },
  computed: {
    iconCls: function() {
      return [
        'iconfont',
        {
          [`icon-${this.icon}`]: this.icon !== ''
        }
      ]
    },
    arrowCls: function() {
      return ['iconfont', this.isShow ? 'icon-arrow-up' : 'icon-arrow-down']
    }
  }
}
</script>
